{% extends 'users/base.html' %}
{% load static %}
{% block head %}
<title>注册页面</title>
{% endblock head %}

{% block extra_style %}
<script src="{% static 'users/js/three.min.js' %}"></script>
<script src="{% static 'users/js/vanta.birds.min.js' %}"></script>

<!-- Loading Bootstrap -->
<link href="{% static 'flatui/dist/css/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

<!-- Loading Flat UI -->
<link href="{% static 'flatui/dist/css/flat-ui.css' %}" rel="stylesheet">
<link href="{% static 'flatui/docs/assets/css/demo.css' %}" rel="stylesheet">

<link rel="shortcut icon" href="img/favicon.ico">
<style>
    .login-center {
        height: 100vh;
    }
</style>
{% endblock %}    

{% block content %}
<div class="vjs-fullscreen" id="my-background">
    <div class="row align-items-centerjustify-content-center login-center">
        <div class="col-md-4 col-md-offset-4">
            <h1 class="is-uppercase has-text-centered has-text-weight-bold">下面开始：
                <br><span class="tag">注册</span>
            </h1>
            <!-- <div class="login-screen"> -->
            <div class="login-icon">
                <h4>Welcome to <small>Mail App</small></h4>
            </div>
            <!-- {% if message %}
            <div class="alert alert-warning">{{ message }}</div>
            {% endif %} -->
            <div>
                <form class="login-form" action="" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" name="email" class="form-control login-field" value=""
                            placeholder="邮箱" id="login-name">
                        <label class="login-field-icon fui-user" for="login-name"></label>
                        {{ form.errors.email }}
                    </div>

                    <div class="form-group">
                        <input type="password" name="password" class="form-control login-field" value=""
                            placeholder="密码" id="login-pass">
                        <label class="login-field-icon fui-lock" for="login-pass"></label>
                        {{ form.errors.password }}
                    </div>
                    <div class="form-group">
                        <input type="password" name="password1" class="form-control login-field" value=""
                            placeholder="再次输入密码" id="login-pass">
                        <label class="login-field-icon fui-lock" for="login-pass"></label>
                        {{ form.errors.password1 }}
                    </div>
                    <input type="submit" class="btn btn-primary btn-lg btn-block" value="注册">
                </form>

            </div>
            <!-- </div> -->
        </div>
    </div>
</div>
{% endblock content %}

{% block foot %}
<script>
    VANTA.BIRDS({
        el: "#my-background",
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00,
        backgroundColor: 0xdbeef2
    })
</script>
{% endblock foot %}
